<!-- src/views/LinkedAccounts.vue -->
<template>
  <div>

    <Card>
      <CardHeader>
        <CardTitle class="text-2xl font-bold tracking-tight">绑定第三方账号</CardTitle>
      </CardHeader>
      <CardContent>
        <div class="space-y-4 mt-5">
          <div v-for="account in linkedAccounts" :key="account.id" class="flex items-center justify-between">
            <div class="flex items-center space-x-4">
              <img :src="account.icon" :alt="account.name" class="w-8 h-8" />
              <div>
                <h3 class="text-lg font-semibold">{{ account.name }}</h3>
                <p class="text-sm text-gray-500">{{ account.status }}</p>
              </div>
            </div>
            <Button @click="toggleLinkAccount(account)" :variant="account.isLinked ? 'destructive' : 'default'">
              {{ account.isLinked ? "解除关联" : "关联账号" }}
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  Card,
  CardHeader,
  CardTitle,
  CardContent
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'

const linkedAccounts = ref([
  {
    id: 1,
    name: "微信",
    icon: "/icons/wechat.png",
    status: "已关联",
    isLinked: true,
  },
  {
    id: 2,
    name: "QQ",
    icon: "/icons/qq.png",
    status: "未关联",
    isLinked: false,
  },
  {
    id: 3,
    name: "微博",
    icon: "/icons/weibo.png",
    status: "已关联",
    isLinked: true,
  },
  {
    id: 4,
    name: "GitHub",
    icon: "/icons/github.png",
    status: "未关联",
    isLinked: false,
  },
]);

const toggleLinkAccount = (account: any) => {
  account.isLinked = !account.isLinked;
  account.status = account.isLinked ? "已关联" : "未关联";
  // 在这里添加实际的关联/解除关联逻辑
  console.log(`${account.isLinked ? "关联" : "解除关联"} ${account.name} 账号`);
};
</script>
